<?php
// 特性组件 - 展示产品或服务的核心优势

// 确定要使用的配置键
$configKey = isset($configKey) ? $configKey : 'features';

// 从页面配置获取特性数据，使用默认值作为后备
$data = array_merge([
    'section_id' => '',
    'section_title' => '我们的核心优势',
    'section_subtitle' => '专注于提供卓越的产品和服务，以下是我们能够为您带来的核心价值',
    'layout' => 'grid', // grid 或 list
    'columns' => '4', // 1-4
    'card_style' => 'shadow', // shadow 或 border
    'icon_style' => 'circle', // circle 或 square
    'items' => []
], $pageConfig['components'][$configKey] ?? []);

// 根据配置确定列数类名
$columnClasses = [
    '1' => 'grid-cols-1',
    '2' => 'grid-cols-1 md:grid-cols-2',
    '3' => 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
    '4' => 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
];
$columnClass = $columnClasses[$data['columns']] ?? $columnClasses['4'];

// 卡片样式类名
$cardBaseClasses = 'rounded-xl p-6 transition-all duration-300 hover:-translate-y-1';
$cardStyleClasses = [
    'shadow' => $cardBaseClasses . ' bg-white shadow-md hover:shadow-xl',
    'border' => $cardBaseClasses . ' bg-white border border-gray-200 hover:border-primary'
];
$cardClass = $cardStyleClasses[$data['card_style']] ?? $cardStyleClasses['shadow'];

// 图标容器样式
$iconContainerClasses = [
    'circle' => 'rounded-full',
    'square' => 'rounded-lg'
];
$iconContainerClass = $data['icon_style'] && $iconContainerClasses[$data['icon_style']] ?? $iconContainerClasses['circle'];
?>

<!-- 特性展示区域 -->
<section class="py-16" id="<?php echo !empty($data['section_id']) ? $data['section_id'] : 'features'; ?>">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 区域标题 -->
        <?php if (!empty($data['section_title'])): ?>
        <div class="text-center max-w-3xl mx-auto mb-16">
            <?php if (!empty($data['section_pretitle'])): ?>
            <p class="inline-block px-3 py-1 rounded-full text-sm font-medium mb-4 bg-primary/10 text-primary">
                <?php echo $data['section_pretitle']; ?>
            </p>
            <?php endif; ?>
            
            <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">
                <?php echo $data['section_title']; ?>
            </h2>
            
            <?php if (!empty($data['section_subtitle'])): ?>
            <p class="text-lg text-gray-600">
                <?php echo $data['section_subtitle']; ?>
            </p>
            <?php endif; ?>
        </div>
        <?php endif; ?>

        <!-- 特性网格 -->
        <?php if (!empty($data['items']) && is_array($data['items'])): ?>
            <?php if ($data['layout'] === 'grid'): ?>
            <div class="grid <?php echo $columnClass; ?> gap-8">
                <?php foreach ($data['items'] as $feature): ?>
                    <div class="<?php echo $cardClass; ?> group">
                        <!-- 图标 -->
                        <div class="w-14 h-14 bg-primary/10 text-primary <?php echo $iconContainerClass; ?> flex items-center justify-center mb-6 text-2xl group-hover:bg-primary group-hover:text-white transition-colors duration-300">
                            <i class="<?php echo $feature['icon']; ?>"></i>
                        </div>
                        
                        <!-- 标题 -->
                        <h3 class="text-xl font-semibold mb-3 text-gray-900 group-hover:text-primary transition-colors duration-300">
                            <?php echo $feature['title']; ?>
                        </h3>
                        
                        <!-- 描述 -->
                        <p class="text-gray-600">
                            <?php echo $feature['description']; ?>
                        </p>
                        
                        <!-- 可选链接 -->
                        <?php if (!empty($feature['link'])): ?>
                        <a href="<?php echo htmlspecialchars($feature['link']['url']); ?>" class="inline-flex items-center mt-4 text-primary font-medium hover:text-primary/80 transition-colors">
                            <?php echo $feature['link']['text']; ?>
                            <i class="fa fa-arrow-right ml-2 text-sm"></i>
                        </a>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            </div>
            <?php else: ?>
            <!-- 列表布局 -->
            <div class="space-y-8">
                <?php foreach ($data['items'] as $index => $feature): ?>
                    <div class="<?php echo $cardClass; ?> flex flex-col md:flex-row gap-6 items-center">
                        <div class="w-16 h-16 bg-primary/10 text-primary <?php echo $iconContainerClass; ?> flex items-center justify-center text-2xl flex-shrink-0 group-hover:bg-primary group-hover:text-white transition-colors duration-300">
                            <i class="<?php echo $feature['icon']; ?>"></i>
                        </div>
                        
                        <div class="flex-1 text-center md:text-left">
                            <h3 class="text-xl font-semibold mb-2 text-gray-900 group-hover:text-primary transition-colors duration-300">
                                <?php echo $feature['title']; ?>
                            </h3>
                            
                            <p class="text-gray-600 mb-4">
                                <?php echo $feature['description']; ?>
                            </p>
                            
                            <?php if (!empty($feature['link'])): ?>
                            <a href="<?php echo htmlspecialchars($feature['link']['url']); ?>" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-colors">
                                <?php echo $feature['link']['text']; ?>
                                <i class="fa fa-arrow-right ml-2 text-sm"></i>
                            </a>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
            <?php endif; ?>
        <?php endif; ?>
    </div>
</section>
    